<template>
  <div class="home_box">
    <RouterLink to="/datascreen" style="font-size: 20px;display: block;">到数据大屏</RouterLink>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content">
          <div id="only" class="tu1" ref="chartRef"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content ">
          <div ref="chart2Ref" class="tu1"></div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content ">
          <div ref="GenerateRef" style="width: 100%;height: 500px;"></div>
        </div>
      </el-col>
    </el-row>
    <RouterLink to="/datascreen">去数据大屏</RouterLink>
  </div>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
type EChartsOption = echarts.EChartsOption;

const chartRef = ref(null);
const GenerateRef = ref(null);
const chart2Ref = ref(null);


onMounted(() => {

  // 图表1
  const chart = echarts.init(chartRef.value);

  // 在这里配置echarts的相关选项和数据
  var option1: EChartsOption;

  option1 = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      // feature: {
      //   mark: { show: true },
      //   dataView: { show: true, readOnly: false },
      //   restore: { show: true },
      //   saveAsImage: { show: true }
      // }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [40, 170],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
          { value: 26, name: 'rose 6' },
          { value: 22, name: 'rose 7' },
          { value: 18, name: 'rose 8' }
        ]
      }
    ]
  };
  window.addEventListener('resize', function () {
    chart.resize();
  });
  chart.resize({
    // width: ,  // 指定宽度
    height: 500  // 指定高度
  });
  option1 && chart.setOption(option1);

  // 图表2
  // Generate data
  var option2: EChartsOption;
  const GenerateChart = echarts.init(GenerateRef.value);

  let category = [];
  let dottedBase = +new Date();
  let lineData = [];
  let barData = [];

  for (let i = 0; i < 20; i++) {
    let date = new Date((dottedBase += 3600 * 24 * 1000));
    category.push(
      [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
    );
    let b = Math.random() * 200;
    let d = Math.random() * 200;
    barData.push(b);
    lineData.push(d + b);
  }

  // option
  option2 = {
    // backgroundColor: '#0f375f',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['line', 'bar'],
      textStyle: {
        color: '#ccc'
      }
    },
    xAxis: {
      data: category,
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      }
    },
    yAxis: {
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      }
    },
    series: [
      {
        name: 'line',
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 15,
        data: lineData
      },
      {
        name: 'bar',
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#14c8d4' },
            { offset: 1, color: '#43eec6' }
          ])
        },
        data: barData
      },
      {
        name: 'line',
        type: 'bar',
        barGap: '-100%',
        barWidth: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(20,200,212,0.5)' },
            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
            { offset: 1, color: 'rgba(20,200,212,0)' }
          ])
        },
        z: -12,
        data: lineData
      },
      {
        name: 'dotted',
        type: 'pictorialBar',
        symbol: 'rect',
        itemStyle: {
          color: '#0f375f'
        },
        symbolRepeat: true,
        symbolSize: [12, 4],
        symbolMargin: 1,
        z: -10,
        data: lineData
      }
    ]
  };
  option2 && GenerateChart.setOption(option2);

  // 图标3
  var myChart = echarts.init(chart2Ref.value);
  var option: EChartsOption;

  option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
  };

  option && myChart.setOption(option);



});

</script>

<style lang="less" scoped>
.home_box {
  width: 100%;
  height: 100%;
  // background-color: #080808;

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
    margin-top: 20px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    height: 500px;
    // background-color: powderblue;
  }

  .tu1 {
    width: 100%;
    height: 100%;
    // background-color: #080808;
  }
}
</style>